<template>
    <div>
        <el-table border style="width: 100%" :data="store.getters['user/getUser']">
            <el-table-column label="用户编号" width="200" prop="uid">
            </el-table-column>
            <el-table-column label="用户名称" width="200" prop="username">
            </el-table-column>
            <el-table-column label="所属角色" width="200" prop="roleid">
            </el-table-column>

            <el-table-column label="状态" prop="status">

                <el-button type="success" plain disabled>启用</el-button>

            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="item">
                    <div>
                        <el-button size="small" type="primary" @click="edit(item.row.uid)"><el-icon>
                                <Edit />
                            </el-icon>编辑</el-button>
                        <el-button size="small" type="danger" @click="del(item.row.uid)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>

                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination small background @current-change="changePage" layout="prev, pager, next" :total="store.getters['user/getCount']" :page-size="store.getters['user/getSize']" :current-page="store.state.user.pageNum"/>
    </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { userdel } from '../../request/api'
import { defineEmits } from 'vue'
let emits = defineEmits(['edit'])
let store = useStore()
store.dispatch('user/getUserAction')
store.dispatch('user/getCountAction')

let del = (uid: any) => {
    // console.log(id, 'delll');
    ElMessageBox.confirm(
        '确定要删除这条数据吗?',
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(() => {
            userdel({ uid }).then((res: any) => {
                if (res.data.code == 200) {
                       console.log('1111');
                    ElMessage({
                        type: 'success',
                        message: '已成功删除',
                    })
                    store.dispatch('user/getUserAction')
                    store.dispatch('user/getCountAction')
                } else {
                    ElMessage.error(res.data.msg);
                }
            })
        })
        .catch((action: Action) => {
            ElMessage({
                type: 'info',
                message:
                    action === 'cancel'
                        ? '已取消删除'
                        : 'Stay in the current route',
            })
        })
}
let edit = (e: any) => {
    emits('edit', e)
}
let changePage=(n:any)=>{
    console.log(n);
    store.dispatch('user/changePageAction',n)
}
</script>

<style scoped lang="less"></style>